import { Component } from 'react'
import { Button, Card, Toast } from 'antd-mobile'
import { AntOutline, RightOutline } from 'antd-mobile-icons'

import styles from './index.module.scss'

function Temp() {
  return (
    <Card
      title={
        <div style={{ fontWeight: 'normal' }}>
          <AntOutline style={{ marginRight: '4px', color: '#1677ff' }} />
          卡片标题
        </div>
      }
      extra={<RightOutline />}
      style={{ borderRadius: '16px' }}
    >
      <div className={styles.content}>卡片内容</div>
      <div className={styles.footer}>
        <Button
          color='primary'
          onClick={() => Toast.show('点击了底部按钮')}
        >
          底部按钮
        </Button>
      </div>
    </Card>
  )
}

export class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  toPage(path) {
    this.props.history.push(path)
  }
  render() {
    return (
      <div>
        <Temp></Temp>
        <Button block color='primary' size='large' onClick={() => this.toPage('/home')}>跳转home</Button>
        <br />
        <Button block color='primary' size='large' onClick={() => this.toPage('/example')}>跳转example</Button>
      </div>
    )
  }
}